<template>
	<view>
		<view class="form" v-if="type === 1">
			<view class="form-list">
				<view class="form-item">
					<view class="form-item-label">展示在榜单</view>
					<view class="input switch">
						<switch :checked="form.RankingStatus === 1" color="#12B475" style="transform:scale(0.9)"
							@change="e=>change(e,'RankingStatus')" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">认证展示</view>
					<view class="input switch">
						<switch :checked="form.authentication === 1" color="#12B475" style="transform:scale(0.9)"
							@change="e=>change(e,'authentication')" />
					</view>
				</view>
				
				<view class="form-item" @click="setType" v-if="form.circle_type==1">
					<view class="form-item-label">时间轴可见范围设置</view>
					<view class="input select">
						<view class="input-tx"></view>
						<image :src="ossUrl + `/static/editData/3.png`"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="form" v-else>
			<view class="form-list">
				<view class="form-item" @click="setTimeAxisStatus(1)">
					<view class="form-item-label">好友公开</view>
					<view class="input radio">
						<image :src="form.TimeAxisStatus === 1 ? ossUrl + `/static/32.png` : ossUrl + `/static/1.png`"
							mode=""></image>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">指定好友可见</view>
					<view class="input radio" @click="setTimeAxisStatus(2)">
						<image :src="form.TimeAxisStatus === 2 ? ossUrl + `/static/32.png` : ossUrl + `/static/1.png`"
							mode=""></image>
					</view>
				</view>
			</view>
			<template v-if="form.TimeAxisStatus === 2">
				<view class="form-select" @click="toDetail">
					选择好友
					<image :src="ossUrl + `/static/26.png`" mode=""></image>
				</view>
				<view class="form-people">
					{{form.TimeAxisList}}
				</view>
			</template>
		</view>
		<l-painter :board="template2" style="width: 100%;" ref="painterRef" custom-style="position: fixed; left: 200%" />
		<card class="hb-img" style="position: fixed; left: 300%;top:-100%;width: 690rpx;" ref="cardRef" />
	</view>
</template>

<script>
	import {
		InformationUserPrivacySetUp,
		InformationUserPrivacy,
		InformationIdentity,
		InformationEditBusinessCard,
		InformationUserBusinessCardHeadData,
		InformationStyleSaving,
		InformationShareStylesSaving,
		InformationBusinessCardList,
		miniLogin,
		InformationBusinessCard
	} from '@/common/http/api.js'
	import HeaderBar from "@/components/header/header.vue";
	import {
		uploadImg,
		uploadVideo,
		uploadDel
	} from '@/common/upload.js'
	import {
		ossUpload,
		ossDel
	} from '@/common/oss.js'
	export default {
		components: {
			HeaderBar
		},
		data() {
			return {
				form: {
					RankingStatus: 0, //榜单是否显示 0是关闭 1是开启
					PhoneStatus: 0, //手机号 是否显示 0是关闭 1是开启
					TimeAxisStatus: 1, //1是好友可见 2是指定好友
					TimeAxisList: [], //TimeAxisList
					authentication: 0 //1是显示 0是不显示
				},
				type: 1,
				list: [],
				userInfo: {},
				template2: {},
				cardStyleInfo: '',
				list: [],
			};
		},
		onLoad() {

		},
		onShow() {
			// let list = uni.getStorageSync('friendInfo')
			// if(Array.isArray(list) && list.length > 0) {
			// 	this.list = list
			// 	uni.removeStorageSync('friendInfo')
			// }
			this.init()
		},
		computed: {
			getName() {
				return this.list.map(i => i.nickname).join(',')
			}
		},
		methods: {
			init() {
				uni.showLoading()
				InformationUserPrivacy().then(res => {
					uni.hideLoading()
					this.form = res.data
				})
			},
			submit() {
				let data = {
					...this.form,
					TimeAxisList: this.list.map(i => i.id).join(',')
				}
				uni.showLoading()
				InformationUserPrivacySetUp(data).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title: '保存成功！',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			},
			change(e, name) {
				console.log('e', e)
				this.form[name] = e.detail.value ? 1 : 0
				let d = {}
				d[name] = this.form[name]
				uni.showLoading()
				InformationUserPrivacySetUp(d).then(res => {

					if (name === 'PhoneStatus') {
						//手机号修改
						
						InformationBusinessCard().then(res => {
							this.userInfo = res.data
							this.getCardStyle(res.data.business_card)
							//获取名片
						})
						
						return
					}
					uni.hideLoading()
				})
			},
			getCardStyle(user_id) {
				uni.showLoading()
				InformationUserBusinessCardHeadData({

					business_card_id: user_id
				}).then(res => {
					this.cardStyleInfo = res.data
					this.$refs.cardRef.show(this.cardStyleInfo.business_card_layout, this.cardStyleInfo.user, this
						.cardStyleInfo.user.user_img, this.userInfo)
					this.$nextTick(() => {
						this.setCardHttp()
					})
				})
			},
			setCardStyle() {
				this.$nextTick(() => {

				})
			},
			async setCardHttp() {
				uni.showLoading()
				this.$refs.cardRef.submit().then(data => {
					ossUpload(data).then(res => {
						let business_card_img = res.url
						let data = {
							style_id: this.cardStyleInfo.style_id,
							background_id: this.cardStyleInfo.background_id,
							user_img: this.cardStyleInfo.user.user_img,
							business_card_img,
							business_card_id: this.cardStyleInfo.business_card_id
						}
						console.log('data', data)
						uni.showLoading()
						InformationStyleSaving(data).then(res => {
							if (!this.cardStyleInfo.intercept) {
								this.template2 = {
									css: {
										// 根节点若无尺寸，自动获取父级节点
										width: '333rpx',
										height: '266.4rpx'
									},
									views: [
										//底图
										{
											type: 'image',
											src: this.cardStyleInfo.Template_img,
											css: {
												width: '100%',
												height: '100%',
												top: "0",
												right: "0",
												position: "absolute",
												zIndex: '5',
											}
										},
										//名片
										{
											type: 'image',
											src: business_card_img,
											css: {
												width: '333rpx',
												top: "0",
												right: "0",
												position: "absolute",
												zIndex: '4',
											}
										}
									]
								}
								this.$nextTick(() => {
									this.setShareCardHttp()
								})

							} else {
								uni.showToast({duration:3000,
									title: '保存成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)

							}


						})
					}).catch(err => {
						uni.showToast({duration:3000,
							title: '上传失败！',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					})
				}).catch(err => {
					console.log('err', err)
					uni.showToast({duration:3000,
						title: "未能生成，请重新保存!",
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			},
			async setShareCardHttp() {
				this.$refs.painterRef.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);

						// 非H5 保存到相册
						// H5 提示用户长按图另存
						ossUpload(res.tempFilePath).then(res => {
							let business_card_img = res.url
							let data = {
								share_id: this.cardStyleInfo.share_id,
								share_img: business_card_img,
								business_card_id: this.cardStyleInfo.business_card_id,
								intercept: this.cardStyleInfo.intercept,
								share_title: this.cardStyleInfo.share_title,
							}
							console.log('data', data)
							uni.showLoading()
							InformationShareStylesSaving(data).then(res => {
								uni.showToast({duration:3000,
									title: '保存成功',
									icon: 'none'
								})
								setTimeout(() => {
									this.$store.dispatch('getShare')
									uni.navigateBack()
								}, 1500)


							})
						}).catch(err => {
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						})
					},
				});
			},
			setType() {
				this.type = 2
			},
			goBackFn() {
				console.log('点击返回')
				if (this.type === 2) {
					this.type = 1
				} else {
					uni.navigateBack()
				}
			},
			setTimeAxisStatus(e) {
				this.form.TimeAxisStatus = e
				uni.showLoading()
				InformationUserPrivacySetUp({
					TimeAxisStatus: e
				}).then(res => {
					uni.hideLoading()
				})
			},
			toDetail() {
				uni.navigateTo({
					url: '/pagesA/privacySettings/selectFriends'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}

	.form {
		width: 100%;
		margin: 0 auto;

		.form-list {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 24rpx;

			.form-list-title {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #EEEEEE;
			}

			.form-item {
				width: 100%;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #F6F7F8;
				box-sizing: border-box;
				padding: 30rpx;

				.form-item-label {
					width: 300rpx;

					text {
						color: red;
					}
				}

				.input {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.input-tx {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 28rpx;
						color: #999999;
						flex: 1;
						min-width: 0;
						margin-right: 30rpx;
						text-align: right;
					}

					input {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 28rpx;
						color: #999999;
						flex: 1;
						min-width: 0;
						margin-right: 30rpx;
						text-align: right;
						padding-right: 18rpx;
					}

					.ac {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 28rpx;
						color: #999999;
						text-align: right;
					}

					image {
						width: 18rpx;
						height: 22rpx;
					}
				}

				.radio {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding-right: 87rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}

				}

				.upload {
					.upload-item {
						width: 100%;
						display: flex;
						align-items: center;

						image {
							width: 88rpx;
							height: 88rpx;
							margin-right: 40rpx;
						}

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #23B97F;
						}
					}
				}

				.tx-r {
					.input-tx {
						text-align: right;
					}
				}

				.select {
					.input-tx {
						text-align: right;

					}
				}

				.switch {
					display: flex;
					justify-content: flex-end;
				}
			}

			.form-list-add {
				height: 170rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 28rpx;
					margin-right: 20rpx;
					height: 28rpx;
				}

				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
				color: #23B97F;
			}
		}

		.form-select {
			margin-left: 54.5rpx;
			margin-top: 14rpx;
			margin-bottom: 28rpx;
			width: 641rpx;
			height: 85rpx;
			background: #FFFFFF;
			border-radius: 43rpx;
			box-sizing: border-box;
			padding: 0 54rpx;
			display: inline-flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 36rpx;
				margin-top: 5rpx;
			}
		}

		.form-people {
			box-sizing: border-box;
			padding: 0 55rpx;
			width: 641rpx;
			margin-left: 54.5rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #12B475;
		}
	}

	.form-btn {
		margin: 0 auto;
		width: 690rpx;
		height: 80rpx;
		background: #23B97F;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: white;
		margin-top: 40rpx;
	}

	.form-btn {
		margin: 0 auto;
		width: 690rpx;
		height: 80rpx;
		background: #23B97F;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: white;
		margin-top: 40rpx;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		z-index: 999;
	}
</style>